﻿$directions: ("t":"top", "b":"bottom", "l":"left", "r":"right");
$dimensions: ("p":"padding", "m":"margin");
//获取padding margin间隔
@each $dim in $dimensions {
    //循环四个方向
    @each $dir in $directions {
        @for $i from 1 through 5 {
            $size: $i*5;

            .#{nth($dim,1)}#{nth($dir,1)}-#{$size} {
                #{nth($dim,2)}-#{nth($dir,2)}: #{$size}px;
            }
        }
    }
}


.flex-container {
    display: flex;

    &.is-vertical {
        flex-direction: column;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding-top: 80px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-size: 14px;
    background-color: #e6eaee;
}

#main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.main-container.is-full-container {
    width: 100%;
    margin: 0 auto;
}

.is-top-align {
    margin-top: -80px;
}

a {
    color: $--color-primary;
    transition: .5s;
    text-decoration: none;
    cursor: pointer;

    &:hover {
        color: #0096d0;
    }

    &:focus {
        outline: none;
    }
}

p {
    margin:0 0 10px;
    font-size:14px;
}